<!-- 
 * @Author: 汤米淘大米
 * @Date: 2022-06-24
 * @LastEditors: Tommy Chen
 * @LastEditTime: 2024-08-27
 * @FilePath: /macc.admin.vue/src/views/login/index.vue
 * @Description: 
-->
<template>
  <div class="login-wrapper">
    <div class="login-main">
      <div class="login-content">
        <div class="bg">
          <!-- 背景图片 -->
          <img
            class="logo"
            src="@/project/authSys/assets/images/login/loginMain.png"
            alt=""
          />
        </div>
      </div>
      <div class="login-card-wrapper">
        <a-card
          class="login-card"
          :bordered="false"
          style="width: 100%; padding: 32px 40px"
        >
          <div class="logo">
            <!-- 登录logo -->
            <img
              src="@/project/authSys/assets/images/login/loginLogo.png"
              alt=""
            />
          </div>
          <a-form-model
            style="width: 100%"
            ref="generalForm"
            @submit="handleSubmit"
            :model="formData"
            :rules="loginRules"
            :colon="false"
          >
            <a-form-model-item prop="account" label="Account">
              <a-input
                @focus="focusInput"
                :placeholder="$t('common.account')"
                v-model="formData.account"
              />
            </a-form-model-item>
            <a-form-model-item prop="password" label="Password">
              <a-input-password
                @focus="focusInput"
                :placeholder="$t('common.password')"
                v-model="formData.password"
                autocomplete="off"
              />
            </a-form-model-item>
            <a-form-model-item v-show="showSecurityCode" prop="securityCode">
              <div class="vertify-code">
                <a-input
                  @focus="focusInput"
                  :placeholder="$t('common.verification')"
                  v-model="formData.securityCode"
                />
                <img
                  @click="changeSecurityCode"
                  id="validateImg"
                  src=""
                  alt=""
                />
              </div>
              <div class="ant-form-explain error" v-show="errMsg !== ''">
                {{ errMsg }}
              </div>
            </a-form-model-item>
            <a-form-item style="margin-top: 60px">
              <a-button
                class="login-btn"
                type="primary"
                html-type="submit"
                :disabled="submitDisabled"
              >
                {{ btnText }}
              </a-button>
            </a-form-item>
          </a-form-model>
        </a-card>
      </div>
    </div>
    <div class="login-footer">
      <div class="footer-info">
        <!-- 版权 -->
        <p>{{ `©2014-${this.currentYear} Ruijie Networks Co.Ltd` }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { requestHttp, request, maccApi } from '@utils/index';
import moment from 'moment-timezone';

export default {
  name: 'UserManagement',

  data() {
    const validateAct = (rule, value, callback) => {
      if (value !== '') {
        callback();
      } else {
        callback(new Error(this.$t('common.accountTip')));
      }
    };
    return {
      submitDisabled: false,
      btnText: this.$t('login.signIn'),
      formData: {
        account: '',
        password: '',
        securityCode: '',
      },
      showSecurityCode: false,
      loginRules: {
        account: [
          {
            required: true,
            validator: validateAct,
          },
        ],
        password: [
          {
            required: true,
            message: this.$t('common.pwdTip'),
          },
        ],
        securityCode: [
          {
            required: false,
            message: 'Invalid securityCode',
          },
        ],
      },
      isPvt: process.env.VUE_APP_MACC_CLOUD_ENV === 'private',
      errMsg: 'Invalid securityCode', // 登录错误消息
      prefix: location.origin,
      // prefix: 'http://172.29.45.156/'
    };
  },
  computed: {
    currentYear() {
      return moment().format('YYYY');
    },
  },
  mounted() {
    this.refreshsecurityCode(localStorage.getItem('loginError') === 'true');
  },
  methods: {
    focusInput() {
      this.errMsg = '';
    },
    // 表单提交
    handleSubmit(e) {
      e.preventDefault();
      this.$refs.generalForm.validate((valid) => {
        if (!valid) {
          return false;
        } else {
          this.login();
        }
      });
    },
    getQueryVariable(variable) {
      //  获取路径上的参数
      const query = this.$route.query;
      // 如果存在这个参数则返回
      if (variable in query) {
        return query[variable];
      }
      return false;
    },
    // 登录接口
    async login() {
      var back = this.getQueryVariable('back');
      const params = { ...this.formData };
      params.password = encodeURIComponent(params.password);
      const res = await request(maccApi.WEBPROXY_LOGIN, 'POST', params);
      if (res.code !== 0) {
        localStorage.setItem('loginError', true);
        this.refreshsecurityCode(true);
        this.errMsg = res.msg;
        // this.$message.warning(res.msg);
      } else {
        localStorage.setItem('loginError', false);
        this.refreshsecurityCode(false);

        // 保存密码，用于修改初始密码时使用
        this.$store.commit('AuthCommon/SET_LOGIN_PWD', this.formData.password);

        if (back) {
          //跳转到被拦截时的页面
          back = decodeURIComponent(back);
          location.href = back;
        } else {
          //这里跳转到默认页面
          this.$router.push('/');
        }
      }
    },
    //  改变验证码
    changeSecurityCode() {
      var imgSrc = document.getElementById('validateImg');
      let src = maccApi.WEBPROXY_CODE;
      src = src.replace('{dateTime}', new Date().getTime());
      imgSrc.setAttribute('src', src);
    },
    // 判断是否出现验证码
    refreshsecurityCode(showSecurityCode) {
      if (showSecurityCode) {
        this.showSecurityCode = true;
        this.loginRules.securityCode[0].required = true;
        this.changeSecurityCode();
      }
      if (!this.showSecurityCode) {
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login-wrapper {
  position: relative;
  max-height: 100vh;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  background: url('@/project/authSys/assets/images/login/loginBg.jpg') center
    bottom / cover !important;
  box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 35px -5px;

  .login-svg {
    width: 139px;
    height: auto;
    position: absolute;
    top: 60px;
    left: 60px;

    & .svg {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .login-main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-content {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .bg {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        & img {
          width: 80%;
          max-width: 720px;
        }

        & p {
          width: 33.33%;
          margin-top: 32px;
          flex: 1;

          & img {
            width: 100%;
          }
        }
      }
    }

    @media screen and (max-width: 1000px) {
      .login-content {
        display: none;
      }
    }

    .login-card-wrapper {
      height: 100%;
      width: 400px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: white;
      text-align: left;
      /deep/.ant-form-item-required::before {
        display: none;
      }
      /deep/.ant-form label {
        font-size: 16px;
        color: @text-title;
        line-height: 18px;
        margin-bottom: 12px;
      }
      /deep/.ant-card-body {
        width: 300px;
      }
      .login-card {
        display: flex;
        justify-content: center;
      }
      .logo {
        text-align: center;
        margin-bottom: 48px;
        & img {
          max-width: 176px;
        }
      }

      /deep/ .ant-form-item {
        margin-bottom: 32px;
      }

      /deep/.ant-form-item-label {
        line-height: 18px;
        margin-bottom: 8px;
      }

      /deep/ .ant-card-body {
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      /* 验证信息 */
      /deep/ .ant-form-explain {
        width: 100%;
        position: absolute;
        margin: 4px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.error {
          color: #f5222d;
          width: 294px;
          position: relative;
        }
      }

      /deep/ .ant-card-bordered {
        overflow: hidden auto;
      }

      /deep/ input {
        box-sizing: border-box;
        font-variant: tabular-nums;
        list-style: none;
        font-feature-settings: 'tnum';
        position: relative;
        display: inline-block;
        width: calc(100% - 4px);
        height: 48px;
        padding: 4px 11px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 1.5;
        background-color: #f5f5f5;
        border: 1px solid #f5f5f5;
        border-radius: 8px;
        transition: all 0.3s;
      }

      .login-btn,
      .register-btn {
        width: 100%;
        height: 48px;
        border-radius: 24px;
      }

      .forget-psw {
        font-size: 14px;
        color: #666;
        height: 24px;
        line-height: 24px;
        display: flex;
        justify-content: flex-end;

        & span {
          cursor: pointer;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      //验证码
      .vertify-code {
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: space-between;

        & /deep/ input {
          width: 60%;
          margin-right: 10px;
        }

        & img {
          flex: 1;
          height: 100%;
          cursor: pointer;
        }
      }

      //忘记密码，发送验证码
      .check-code {
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: space-between;

        & /deep/ input {
          width: 60%;
          margin-right: 10px;
        }

        & button {
          flex: 1;
          height: 100%;
          cursor: pointer;
        }
      }
    }

    @media screen and (min-width: 1920px) {
      .login-card-wrapper {
        width: 540px;
      }
    }
  }

  .login-footer {
    position: fixed;
    bottom: 56px;
    color: white;
    width: 360px;
    left: 50%;
    transform: translateX(-50%);

    .footer-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: white;
      width: 360px;
      opacity: 0.8;

      & span {
        padding: 0 10px;
        border-right: 1px solid #fff;

        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }

      & span:last-child {
        border: none;
      }
    }
  }
}

.flex {
  display: flex;
}
</style>
